<template>
	<view class="detail">
		<scroll-view scroll-y style="height: 100vh;width: 100%;padding: 32rpx;box-sizing: border-box;" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view>
				<view class="card margin-b32">
					<view class="padding-b16">
						<text class="font-size-34 font-weight-bold text-black">申请单信息</text>
					</view>
					<view class="order-info">
						<view v-if="info.status_msg" class="flex align-center justify-between">
							<text class="text-black">状态描述：</text>
							<view class="status" :class="[{'status-active': info.status == 0}, {'status-complate' : info.status == 1}]">
								<text>{{ info.status_msg }}</text>
							</view>
						</view>
						<view v-if="info.roster_name" class="flex align-center justify-between">
							<text class="text-black">提交人：</text>
							<text>{{ info.roster_name }}</text>
						</view>
						<view v-if="info.roster_phone" class="flex align-center justify-between">
							<text class="text-black">提交人电话：</text>
							<text>{{ info.roster_phone }}</text>
						</view>
						<view class="divider"></view>
						<view v-if="info.applicant_name" class="flex align-center justify-between">
							<text class="text-black">申请人：</text>
							<text>{{ info.applicant_name }}</text>
						</view>
						<view v-if="info.applicant_phone" class="flex align-center justify-between">
							<text class="text-black">申请人电话：</text>
							<text>{{ info.applicant_phone }}</text>
						</view>
						<view v-if="info.form_type_msg" class="flex align-center justify-between">
							<text class="text-black">申请单类型：</text>
							<text>{{ info.form_type_msg }}</text>
						</view>
						<view v-if="info.car_demand" class="flex align-center justify-between">
							<text class="text-black">用户需求：</text>
							<text>{{ info.car_demand }}</text>
						</view>
						<view v-if="info.car_destination" class="flex align-center justify-between">
							<text class="text-black">{{info.form_type === 3 ? '配送地址' : '目的地'}}：</text>
							<text>{{ info.car_destination }}</text>
						</view>
						<view v-if="info.start_time" class="flex align-center justify-between">
							<text class="text-black">{{info.form_type === 3 ? '配送时间' : '出发时间'}}：</text>
							<text>{{ info.start_time }}</text>
						</view>
						<view v-if="info.end_time" class="flex align-center justify-between">
							<text class="text-black">还车时间：</text>
							<text>{{ info.end_time }}</text>
						</view>
						<view v-if="info.car_reasons" class="flex align-center justify-between">
							<text class="text-black">{{info.form_type === 3 ? '文件类型' : '用车事由'}}：</text>
							<text>{{ info.car_reasons }}</text>
						</view>
						<view v-if="info.remark" class="flex align-center justify-between">
							<text class="text-black">申请单备注：</text>
							<text>{{ info.remark }}</text>
						</view>
						<view v-if="info.car_data && info.car_data.length" class="list">
							<view class="item" v-for="(item, index) in info.car_data" :key="index">
								<view class="flex align-center justify-between">
									<view class="car-name">
										<text>{{ item.pinpai }}</text>
									</view>
									<view class="num-wrap">
										<text class="num">{{ item.count }}</text>
										<text>辆</text>
									</view>
								</view>
								<view v-if="cat.pailiang || cat.zuoshu || cat.price" class="attr2">
									<text v-if="cat.price">{{ cat.price }}元/天</text>
									<text v-if="cat.pailiang" class="inline-block padding-l24">{{ cat.pailiang }}</text>
									<text v-if="cat.zuoshu" class="inline-block padding-l24">{{ cat.zuoshu }}</text>
								</view>
								<!-- <view class="attr2">
									<text>999元/天</text>
									<text class="inline-block padding-l24">大众</text>
									<text class="inline-block padding-l24">5座</text>
								</view> -->
								<view class="info padding-t24">
									<view class="driver">
										<view class="flex align-center">
											<text>驾车司机：</text>
											<text>{{0 === item.is_driver ? '不需要司机' : '需要司机'}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="info.msg && appid === 'wxbcf19d47dd54282f'" class="card margin-b32">
					<view class="padding-b16">
						<text class="font-size-34 font-weight-bold text-black">温馨提示</text>
					</view>
					<view class="info-msg">
						<mp-html v-if="info.msg" id="richText" :content="info.msg"></mp-html>
					</view>
				</view>
				
				<view v-if="info.order && info.order.length" class="card margin-b32">
					<view class="padding-b16">
						<text class="font-size-34 font-weight-bold text-black">出车订单</text>
					</view>
					<view class="list">
						<view class="item" v-for="(item, index) in info.order" :key="index">
							<view class="flex align-center justify-between">
								<view class="">
									<text class="car-name">{{ item.chepai }}</text>
								</view>
								<view class="status" :class="[{'status-active': item.status == 0}, {'status-complate' : item.status == 1}]">
									<text>{{ item.status_msg }}</text>
								</view>
							</view>
							<view class="attr">
								<text>{{item.pailiang}}</text>
								<text v-if="item.zuoshu" class="inline-block padding-l16">{{ item.zuoshu }}座</text>
							</view>
							<view class="info">
								<view v-if="item.pinpai" class="flex align-center justify-between">
									<text class="text-black">品牌：</text>
									<text>{{item.pinpai}}</text>
								</view>
								<view v-if="item.drivername" class="flex align-center justify-between">
									<text class="text-black">司机：</text>
									<text>{{ item.drivername }}</text>
								</view>
								<view v-if="item.qucheshijian" class="flex align-center justify-between">
									<text class="text-black">取车时间：</text>
									<text>{{ item.qucheshijian }}</text>
								</view>
								<view v-if="item.huancheshijian" class="flex align-center justify-between">
									<text class="text-black">还车时间：</text>
									<text>{{ item.huancheshijian }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="info.log && info.log.length" class="card">
					<view class="padding-b16">
						<text class="font-size-34 font-weight-bold text-black">订单日志</text>
					</view>
					<view class="logs">
						<view class="log-item" v-for="(item, index) in info.log" :key="index">
							<view class="line-height-42 padding-b16 flex align-center justify-between">
								<text class="text-black font-size-32 font-weight-bold">{{item.title}}</text>
								<view v-if="item.approval_status" class="status" :class="[{'status-active': item.approval_status == 0}, {'status-complate' : item.approval_status == 1}]">
									<text>{{ item.approval_status == 1 ? '通过' : '驳回' }}</text>
								</view>
							</view>
							<view v-if="item.dispose_name" class="flex align-center justify-between">
								<text class="text-black">处理人：</text>
								<text>{{item.dispose_name}}</text>
							</view>
							<view v-if="item.time" class="flex align-center justify-between">
								<text class="text-black">时间：</text>
								<text>{{ item.time }}</text>
							</view>
							<view v-if="item.remark" class="flex align-center justify-between">
								<text class="text-black">审核备注：</text>
								<text>{{item.remark}}</text>
							</view>
							<view v-if="item.signatureimg" class="signature-img">
								<image :src="item.signatureimg" mode="widthFix"></image>
							</view>
							
						</view>
					</view>
				</view>
				
				
				<view style="height: 180rpx;"></view>
				<view v-if="(info.meta && info.meta.audit && info.meta.audit.value === 1) ||
				(info.meta && info.meta.cancel && info.meta.cancel.value === 1) ||
				(info.meta && info.meta.edit && info.meta.edit.value === 1)"
				 class="footer" :style="{'padding-bottom': safeAreaBottom ? safeAreaBottom+'px' : '24rpx'}">
					<!-- <block v-if="info.meta && info.meta.audit && info.meta.audit.value === 1">
						<button @click="openRemark(-1)">
							<text>不同意</text>
						</button>
						<button @click="openRemark(1)">
							<text>同意</text>
						</button>
					</block> -->
					<!-- <button @click="openRemark" >
						<text class="text-white">审核</text>
					</button> -->
					<button @click="openRemark" v-if="info.meta && info.meta.audit && info.meta.audit.value === 1">
						<text class="text-white">{{ info.meta.audit.text }}</text>
					</button>
					<button @click="cancel" v-if="info.meta && info.meta.cancel && info.meta.cancel.value === 1">
						<text>{{ info.meta.cancel.text }}</text>
					</button>
					<button @click="edit" v-if="info.meta && info.meta.edit && info.meta.edit.value === 1">
						<text class="text-white">{{ info.meta.edit.text }}</text>
					</button>
				</view>
			</view>
		</scroll-view>
		
		<remark-popup ref="remark" @confirm="confirmRemark"></remark-popup>
		<signature ref="signature" @confirm="confirmSign"></signature>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import remarkPopup from './components/remark-popup.vue'
	
 	export default {
		components: { remarkPopup },
		data() {
			return {
				// step: 2,
				orderId: '',
				info: {},
				params: {
					audit: '', // -1驳回；1通过
					signatureimg: '', // 签名图片
					remark: '', // 备注描述
				},
				type: '',
			};
		},
		computed: {
			...mapState('common', ['safeAreaBottom', 'appid'])
		},
		onLoad(options) {
			this.orderId = options.orderId
		},
		onShow() {
			this.getInfo()
		},
		methods:{
			linktap(e) {
				uni.makePhoneCall({
					phoneNumber: e.innerText //仅为示例
				});
			},
			cancel() {
				uni.showModal({
					title: '是否确认取消？',
					success: (result) => {
						if (result.confirm) {
							this.$api.orderCancelApi({id: this.orderId}).then(res=>{
								uni.showToast({
									title: res.retmsg
								})
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1,
										success: (res) => {
											console.log('返回成功');
										},
										fail: (err) => {
											console.log('返回失败', err);
											uni.switchTab({
												url: '/pages/index/index'
											})
										}
									})
								}, 1200)
							}).catch(err=> {
								console.log(err);
							})
						}
					}
				})
			},
			edit() {
				switch (this.info.form_type){
					case '1':
						uni.navigateTo({
							url: '/pages/select-cat/select-cat?orderId='+this.orderId
						})
						break;
					case '2':
						uni.navigateTo({
							url: '/pages/temporary-form/temporary-form?orderId='+this.orderId
						})
						break;
					case '3':
						uni.navigateTo({
							url: '/pages/file-form/file-form?orderId='+this.orderId
						})
						break;
				}
				
			},
			getInfo() {
				this.$api.orderDetailsApi({id: this.orderId}).then(res=>{
					this.info = res.data
				}).catch(err=>{
					console.log(err);
				})
			},
			openRemark(val) {
				this.$refs.remark.open()
			},
			confirmRemark(val) {
				this.params.remark = val.remark
				this.params.audit = val.audit
				this.$refs.signature.show()
			},
			async confirmSign(val) {
				this.params.id = this.orderId
				const i = val.lastIndexOf('.')
				const name = new Date().getTime() + val.substring(i, val.length);
				try{
					const COSAuth = await this.$api.uploadCosApi({ file_name: name, file_module: 'signature' })
					this.params.signatureimg = COSAuth.src
					uni.uploadFile({
						url      : COSAuth.url,
						filePath : val,
						name     : 'file',
						formData : COSAuth.data,
						success  : (res) => {
							if (res.statusCode === 204) {
								this.$api.orderAuditApi(this.params).then(res2 =>{
									uni.showToast({
										title: res2.retmsg
									})
									this.getInfo()
								}).catch(err=>{
									console.log('err', err);
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '文件上传失败'
								})
							}
						},
						fail: (err) => {
							uni.showToast({
								mask: true,
								icon: 'none',
								title: err.errMsg
							})
						}
					});
				}catch(err){
					// uni.showToast({
					// 	icon: 'none',
					// 	title: err.retmsg
					// })
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		// padding: 32rpx;
		box-sizing: border-box;
		
		.card {
			
			.logs{
				
				.log-item{
					position: relative;
					padding-left: 24rpx;
					font-weight: 400;
					font-size: 26rpx;
					padding-top: 6rpx;
					line-height: 44rpx;
					margin-bottom: 60rpx;
					color: rgba(0, 0, 0, 0.6);
					
					&:last-child::after{
						border: none;
					}
					
					&::after{
						position: absolute;
						content: '';
						top: 20rpx;
						left: 0;
						width: 1px;
						height: calc(100% + 60rpx);
						border-left: 1px solid rgba(0, 0, 0, 0.1);
					}
					
					
					&:before{
						position: absolute;
						content: '';
						top: 20rpx;
						left: 0;
						width: 18rpx;
						height: 18rpx;
						flex-shrink: 0;
						border-radius: 50%;
						transform: translateX(-50%);
						background-color: var(--primary-color);
					}
					
					.signature-img{
						width: 100%;
						// height: 240rpx;
						padding: 16rpx;
						margin-top: 16rpx;
						border-radius: 8rpx;
						box-sizing: border-box;
						border: 1rpx solid rgba(0, 0, 0, 0.1);
						
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
			.order-info{
				font-weight: 400;
				font-size: 26rpx;
				line-height: 48rpx;
				color: rgba(0, 0, 0, 0.6);
			}
			
			.divider{
				margin: 16rpx 0;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			}
		}
		
		
		.status{
			// width: 192rpx;
			height: 48rpx;
			padding: 0 24rpx;
			font-weight: 400;
			font-size: 24rpx;
			display: flex;
			line-height: 40rpx;
			border-radius: 4rpx;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			background: rgba(0, 0, 0, 0.4);
		}
		
		.status-active{
			color: #FFFFFF;
			background: #ED7B2F;
		}
		
		.status-complate{
			color: #FFFFFF;
			background-color: rgba(87, 147, 127, 1);
		}
		
		
		.list{
			padding-top: 16rpx;
		}
		
		.item{
			flex-shrink: 0;
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 12rpx;
			border: 1rpx solid #999;
			
			.car-name{
				color: #000000;
				font-weight: 600;
				font-size: 34rpx;
				line-height: 44rpx;
			}
			
			.car-type{
				color: #000000;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 44rpx;
				padding-left: 8rpx;
				display: inline-block;
			}
			
			.num-wrap{
				font-weight: 400;
				font-size: 34rpx;
				line-height: 44rpx;
				color: #000000;
			}
			
			.num{
				color: #ED7B2F;
				font-weight: 600;
			}
			
			.attr{
				font-weight: 400;
				font-size: 26rpx;
				line-height: 44rpx;
				color: rgba(0, 0, 0, 0.3);
			}
			
			.attr2{
				font-weight: 400;
				font-size: 26rpx;
				color: #c20000;
				line-height: 32rpx;
				padding-top: 16rpx;
			}
			
			.info{
				font-weight: 400;
				font-size: 26rpx;
				padding-top: 6rpx;
				line-height: 44rpx;
				color: rgba(0, 0, 0, 0.6);
			}
		}
		
		.info-msg {
			color: #ED7B2F;
			font-weight: 600;
			font-size: 34rpx;
			line-height: 44rpx;
		}
	
		.footer{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 9999;
			display: flex;
			padding: 32rpx;
			align-items: center;
			box-sizing: border-box;
			background-color: #FFFFFF;
			justify-content: space-between;
			box-shadow: 0rpx 0rpx 22rpx rgba(0, 0, 0, 0.1);
			
			button{
				width: 100%;
				color: #FFFFFF;
				
				&::after{
					border: none;
				}
				
				&:first-child{
					color: rgba(0, 0, 0, 0.9);
					background-color: #FFFFFF;
					border: 1px solid rgba(0, 0, 0, 0.6);
				}
				
				&:last-child{
					margin-left: 24rpx;
					background-color: var(--primary-color);
				}
			}
		}
	}
</style>
